<template>
  <div class="container--item__box">
    <div class="container--item__Journalism  animated zoomIn" v-for="(item, index) in arr" :key="index" v-lazy>
      <a :href="item.url" class="container--item__text" @click="a">{{item.title}}</a>
      <img v-if="item.thumbnail_pic_s" :src="item.thumbnail_pic_s" alt="#" class="container--item__img">
      <img v-if="item.thumbnail_pic_s02" :src="item.thumbnail_pic_s02" alt="#" class="container--item__img cen">
      <img v-if="item.thumbnail_pic_s03" :src="item.thumbnail_pic_s03" alt="#" class="container--item__img"><br>
      <span class="container--text__degree">热</span>
      <span class="container--item__Company">{{item.author_name}}</span>
      <span class="container--item__time">{{item.date}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'society',
  data () {
    return {
      arr: []
    }
  },
  methods: {
    a (item) {
      window.location = item
    }
  },
  beforeCreate () {
    this.$bus.$on('data', (data) => {
      this.arr = data
    })
  },
  created () {
    this.$bus.$on('val', (data) => {
      for (let i = 0; i < data.length; i++) {
        this.arr.push(data[i])
      }
    })
    this.$bus.$on('top', (data) => {
      this.arr = ''
      this.arr = data
    })
  }
}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container--item__Journalism{
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    padding-top: .4rem;
    width: 100vw;
    .container--item__text{
      width: 92.26666667vw;
      display: inline-block;
      font-size: .453333333rem;
      position: relative;
      left: .4266666667rem;
      right: .4266666667rem;
      margin-bottom: .29333rem;
      text-decoration: none;
      color: #151515;
    }
    .container--item__img{
      position: relative;
      left: .4266666667rem;
      right: .4266666667rem;
      width: 2.93rem;
      height: 2.32rem;
      border-radius: 5px;
    }
    .cen{
      margin: 0 .0933333333333rem;
    }
    .container--text__degree{
      display: inline-block;
      font-size: .4rem;
      width: .4rem;
      line-height: .4rem;
      color: #e67b7c;
      border: 1px solid #db4a4a;
      text-align: center;
      margin-top: .29333rem;
      margin-bottom: .333333333rem;
      margin-left: .426666667rem;
    }
    .container--item__Company{
      font-size: .4rem;
      margin-left: .28rem;
      color: #d9d9d9;
      padding-bottom: .333333333rem;
      margin-top: .29333rem;
    }
    .container--item__time{
      font-size: .4rem;
      margin-left: .28rem;
      color: #d9d9d9;
      padding-bottom: .333333333rem;
      margin-top: .29333rem;
    }
  }
</style>
